<seed-content>
  <seed-toolbar-header>
    <seed-toolbar-title>{{(video|async)?.videoName}}</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>
  <div class="gray-background" *ngIf="(video|async);else defaultTpl">

    <seed-video [src]="(video|async)?.videoUrl"
                [poster]="(video|async)?.videoCover"
    ></seed-video>

    <div class="video-info">
      <div class="header">
        <h2 class="title"> {{(video|async)?.videoName}}</h2>
        <p>
          <span class="count">{{(video|async)?.playCount}}次</span>
          <span class="intro" [class.open]="isTextHidden" (click)="introToggle()">简介</span>
        </p>
      </div>
      <article class="content " *ngIf="isTextHidden">
        {{(video|async)?.intro || '还没有视频简介哦~'}}
      </article>
      <div class="uploader-info right-arrow-icon border-top" [routerLink]="['/', (video|async)?.userId]">
        <p>
          <seed-avatar [lazyLoadAvatar]="(video|async)?.userIcon"></seed-avatar>
        </p>
        <span>{{(video|async)?.nickName}}</span>
      </div>
    </div>
    <div class="recommand-list top-gap">
      <h3 class="title">列表</h3>
      <video-card-category [category]="videoCateList" [categoryId]="categoryId"
                           *ngIf="videoCateList?.length>0;else defaultTpl"></video-card-category>
    </div>
  </div>
  <ng-template #defaultTpl>
    <missing-default-content></missing-default-content>
  </ng-template>
</seed-content>
